import React, { useState } from 'react'
import PictureCard from './components/PictureCard'
import './app.css'
import { generateAudio } from './lib/audio'


const userPrompt = `
  分析图片内容，找出最能描述该图片的一个英语单词.

  返回 JSON 数据：
  {
    "image_description": "图片的描述",
    "representative_word": "最能描述图片的单词",
    "example_sentence": "结合英文单词和图片描述，给出一个简单的例句",
    "explanation": "结合图片解析英文单词，段落以 Look at ... 开头，将段落分句，每句单独一行，解析的最后给一个日常生活有关的问句",
    "example_replys": ["根据explanation给出的回复 1", "根据explanation给出的回复 2"]
  }
`;

export default function App() {
  const [audio, setAudio] = useState('')
  const [sentence, setSentence] = useState('')
  const [imgPreview, setImgPreview] = useState(undefined as string | undefined)
  const [detailExpand, setDetailExpand] = useState(false)
  const [word, setWord] = useState('请上传图片')
  const [explanation, setExplanation] = useState('')
  const [replys, setReplys] = useState([])

  const submit = async (data: string) => {
    // console.log(data);
    setImgPreview(data)
    //图片分析
    const endpoint = "https://api.moonshot.cn/v1/chat/completions"
    const headers = {
      'Authorization': `Bearer ${import.meta.env.VITE_KIMI_API_KEY}`,
      'Content-Type': 'application/json'
    }
    setWord('分析中...')
    const response = await fetch(endpoint, {
      method: 'POST',
      headers,
      body: JSON.stringify({
        model: 'moonshot-v1-32k-vision-preview',
        messages: [
          {
            role: 'user',
            content: [
              {
                "type": "image_url",
                "image_url": {
                  "url": data,
                },
              },
              {
                "type": "text",
                "text": userPrompt,
              }
            ]
          }
        ]
      })
    })
    const res = await response.json()
    const replyData = JSON.parse(res.choices[0].message.content)
    console.log(JSON.parse(res.choices[0].message.content));
    setSentence(JSON.parse(res.choices[0].message.content).example_sentence)
    setWord(JSON.parse(res.choices[0].message.content).representative_word)
    setExplanation(JSON.parse(res.choices[0].message.content).explanation)
    setReplys(JSON.parse(res.choices[0].message.content).example_replys)

    //获取音频
    const audioUrl = await generateAudio(replyData.representative_word)
    setAudio(audioUrl)
  }
  return (
    <div className='container'>
      <PictureCard word={word} submit={submit} audio={audio} />
      <div className="output">
        <div>{sentence}</div>
        <div className="detail">
          <button onClick={() => setDetailExpand(!detailExpand)}>Talk about it</button>

          {
            !detailExpand ?
              <div className='fold'></div> : (
                <div className='expand'>
                  <img src={imgPreview} alt="" />
                  <div className="explaination">
                    <p>{explanation}</p>
                  </div>
                  <div className="reply">
                      {
                        replys.map((item) => (
                          <div key={item}>
                           <p> {item}</p>
                          </div>
                        ))
                      }
                  </div>
                </div>
              )
          }
        </div>
      </div>
    </div>
  )
}
